<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .slider-bar {
            position: absolute;
            cursor: pointer;
            right: 0;
            top: 650px;
            width: 45px;
            /* height: 200px; */
            background-color: orange;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }

        .header {
            height: 150px;
            background-color: orangered;
        }

        .banner {
            height: 450px;
            background-color: lightblue;
        }

        .main {
            /* height: 1000px; */
            background-color: yellowgreen;
        }

        .slider-bar div {
            text-align: center;
            padding: 5px 0;
            color: #fff;
        }

        .slider-bar .active {
            background-color: orangered;
        }

        .goods {
            height: 600px;
            background-color: pink;
        }

        .zhibo {
            height: 600px;
            background-color: lightcoral;
        }

        .like {
            height: 600px;
            background-color: indigo;
        }

        .back-top {
            display: none;
        }

        .footer {
            height: 400px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- 仿造淘宝侧边导航栏案例 -->
    <div class="slider-bar">
        <div data-index="goods" class="slider-bar-item">品质好货</div>
        <div data-index="zhibo" class="slider-bar-item">好店直播</div>
        <div data-index="like" class="slider-bar-item">猜你喜欢</div>
        <div class="back-top">返回顶部</div>
    </div>
    <div class="header w">Header 头部</div>
    <div class="banner w">Banner 轮播区域</div>
    <div class="main w">Main 主体部分
        <div class="goods" id="goods">品质好货</div>
        <div class="zhibo" id="zhibo">好店直播</div>
        <div class="like" id="like">猜你喜欢</div>
    </div>
    <div class="footer w">
        我是底部
    </div>

    <script>
        //1. 获取元素
        var sliderBar = document.querySelector('.slider-bar'); //获取侧边栏
        var initialTop = 650; // 侧边栏 初始的 top的值
        var change = 600; //设定一个页面卷入内容的临界值，超过该值， 侧边栏 定位就发生变化（绝对定位变成固定定位）
        var main = document.querySelector('.main'); //获取页面主体区域
        var backTop = document.querySelector('.back-top'); //获取回到顶部按钮
        var slideBarItems = document.querySelectorAll('.slider-bar-item');
        var contents = main.children;
        var zhibo = document.querySelector('.zhibo');
        var good = document.querySelector('.goods');

        sliderBar.addEventListener('click', function (e) {
            // 用事件委托实现的滑动栏的点击效果
            if (!e.target.classList.contains('slider-bar-item')) {
                return
            }
            console.log(e.target);
            var id = e.target.getAttribute('data-index');
            animate(window, document.getElementById(id).offsetTop + 3);
        })

        document.addEventListener('scroll', function () {
            // 判断一下 页面是否滚到了 变化的临界值
            if (pageYOffset > change) { //
                sliderBar.style.position = 'fixed'; //超过了临界值，就把侧边栏的定位变成固定定位
                sliderBar.style.top = initialTop - change + 'px'; //并且修改固定定位的顶部偏移值
            } else { // 没有超过临界值，就把侧边栏的定位变为绝对定位
                sliderBar.style.position = 'absolute';
                sliderBar.style.top = initialTop + 'px'; //并且把侧边栏的顶部偏移值 变回初始值
            }
            // 检测一下  判断 页面是否滚到了 主体区域
            if (pageYOffset > main.offsetTop) {
                // console.log('页面已经滚到主题区域了')
                backTop.style.display = 'block'; //滚到主体区域，就让返回顶部显示出来
            } else {
                // console.log('页面已经离开主题区域了');
                backTop.style.display = 'none'; //离开主体区域，就让返回顶部隐藏
            }

            for (var i = 0; i < contents.length; i++) {
                if (contents[i].offsetTop < pageYOffset + 1 && contents[i].offsetTop + contents[i].offsetHeight > pageYOffset + 1) {
                    slideBarItems[i].classList.add('active');
                } else {
                    slideBarItems[i].classList.remove('active');
                }
            }
        })


        backTop.addEventListener('click', function () {
            animate(window, 0);
        })



        function animate(obj, target, callback) {
            // console.log(callback);  callback = function() {}  调用的时候 callback()
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var page = document.documentElement.scrollTop
                // var page = pageYOffset;
                var step = (target - page) / 10;
                console.log(target, page);
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (Math.abs(page - target) <= 1) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    callback && callback();
                }
                console.log(step)
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                // obj.style.left = window.pageYOffset + step + 'px';
                window.scroll(0, page + step);
            }, 15);
        }
    </script>
</body>

</html>